<template>
  <div class="home-container">
    <!-- 数据概览 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <div class="title">今日订单</div>
            <el-tag size="small" type="primary">日</el-tag>
          </div>
          <div class="card-content">
            <div class="number">{{ todayData.orderCount }}</div>
            <div class="compare">
              较昨日
              <span :class="todayData.orderIncrease >= 0 ? 'up' : 'down'">
                {{ Math.abs(todayData.orderIncrease) }}%
                <i :class="todayData.orderIncrease >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <div class="title">今日营收</div>
            <el-tag size="small" type="success">日</el-tag>
          </div>
          <div class="card-content">
            <div class="number">¥{{ todayData.revenue.toLocaleString() }}</div>
            <div class="compare">
              较昨日
              <span :class="todayData.revenueIncrease >= 0 ? 'up' : 'down'">
                {{ Math.abs(todayData.revenueIncrease) }}%
                <i :class="todayData.revenueIncrease >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <div class="title">本月订单</div>
            <el-tag size="small" type="warning">月</el-tag>
          </div>
          <div class="card-content">
            <div class="number">{{ monthData.orderCount }}</div>
            <div class="compare">
              较上月
              <span :class="monthData.orderIncrease >= 0 ? 'up' : 'down'">
                {{ Math.abs(monthData.orderIncrease) }}%
                <i :class="monthData.orderIncrease >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <div class="title">本月营收</div>
            <el-tag size="small" type="danger">月</el-tag>
          </div>
          <div class="card-content">
            <div class="number">¥{{ monthData.revenue.toLocaleString() }}</div>
            <div class="compare">
              较上月
              <span :class="monthData.revenueIncrease >= 0 ? 'up' : 'down'">
                {{ Math.abs(monthData.revenueIncrease) }}%
                <i :class="monthData.revenueIncrease >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :lg="16">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>营收趋势</span>
            <el-radio-group v-model="revenueChartType" size="small">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
              <el-radio-button label="year">年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-content">
            <div ref="revenueChart" style="height: 350px"></div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="8">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>商品销量占比</span>
          </div>
          <div class="chart-content">
            <div ref="productChart" style="height: 350px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待处理事项 -->
    <el-row :gutter="20" class="todo-section">
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="todo-card">
          <div slot="header">
            <span>待处理订单</span>
            <el-button
                type="text"
                style="float: right; padding: 3px 0"
                @click="handleViewMore('order')">
              查看更多
            </el-button>
          </div>
          <el-table
              :data="pendingOrders"
              style="width: 100%"
              :max-height="300">
            <el-table-column prop="orderNo" label="订单编号" width="120"></el-table-column>
            <el-table-column prop="customerName" label="客户姓名" width="100"></el-table-column>
            <el-table-column prop="amount" label="金额" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
              <template slot-scope="scope">
                {{ scope.row.createTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="small"
                    @click="handleViewOrder(scope.row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="todo-card">
          <div slot="header">
            <span>库存预警</span>
            <el-button
                type="text"
                style="float: right; padding: 3px 0"
                @click="handleViewMore('stock')">
              查看更多
            </el-button>
          </div>
          <el-table
              :data="stockWarnings"
              style="width: 100%"
              :max-height="300">
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="category" label="类别" width="100"></el-table-column>
            <el-table-column prop="stock" label="当前库存" width="100">
              <template slot-scope="scope">
                <span :class="{ 'stock-warning': scope.row.stock <= scope.row.warningStock }">
                  {{ scope.row.stock }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="warningStock" label="预警值" width="100"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 订单详情弹窗 -->
<!--    <order-detail-->
<!--        :visible.sync="detailVisible"-->
<!--        :order-id="currentOrderId">-->
<!--    </order-detail>-->
  </div>
</template>

<script src="./home.js" />

<style lang="scss" scoped src="./home.scss" />